<template>
  <div class="report-todo">
    <h1>代办事项统计页面</h1>
    <div class="table-container">
      <el-table :data="todoList" style="width: 100%" border>
        <el-table-column prop="id" label="任务ID" width="100" />
        <el-table-column prop="title" label="任务标题" width="200" />
        <el-table-column prop="assignee" label="负责人" width="120" />
        <el-table-column prop="priority" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="getPriorityType(scope.row.priority)">
              {{ scope.row.priority }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="dueDate" label="截止日期" width="180" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button 
              size="small" 
              type="primary"
              @click="handleTodo(scope.row)">
              处理
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ReportTodo',
  data() {
    return {
      todoList: [
        {
          id: 'T001',
          title: '审核新用户注册申请',
          assignee: 'admin',
          priority: '高',
          status: '待处理',
          createTime: '2023-09-01 10:30:00',
          dueDate: '2023-09-02 18:00:00'
        },
        {
          id: 'T002',
          title: '处理客户投诉工单',
          assignee: 'zhangsan',
          priority: '中',
          status: '进行中',
          createTime: '2023-08-30 14:20:00',
          dueDate: '2023-09-05 17:00:00'
        },
        {
          id: 'T003',
          title: '更新产品价格信息',
          assignee: 'lisi',
          priority: '低',
          status: '待处理',
          createTime: '2023-08-28 09:15:00',
          dueDate: '2023-09-10 17:00:00'
        },
        {
          id: 'T004',
          title: '供应商资质审核',
          assignee: 'admin',
          priority: '高',
          status: '已完成',
          createTime: '2023-08-25 11:30:00',
          dueDate: '2023-08-30 18:00:00'
        }
      ]
    }
  },
  methods: {
    getPriorityType(priority) {
      switch (priority) {
        case '高':
          return 'danger'
        case '中':
          return 'warning'
        case '低':
          return 'success'
        default:
          return 'info'
      }
    },
    getStatusType(status) {
      switch (status) {
        case '待处理':
          return 'info'
        case '进行中':
          return 'warning'
        case '已完成':
          return 'success'
        default:
          return 'info'
      }
    },
    handleTodo(row) {
      this.$message({
        type: 'info',
        message: `正在处理任务: ${row.title}`
      });
    }
  }
}
</script>

<style scoped>
.report-todo {
  padding: 20px;
  background-color: #f5f5f5;
}

.report-todo h1 {
  margin-top: 0;
  color: #2c3e50;
}

.table-container {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 4px;
}
</style>